<template>
  <Layout>
    <Breadcrumb :style="{margin: '10px 0'}">
      <BreadcrumbItem>权限管理</BreadcrumbItem>
      <BreadcrumbItem>分类权限</BreadcrumbItem>
      <BreadcrumbItem>成员列表</BreadcrumbItem>
    </Breadcrumb>
    <Content>

      <Row :style="{margin:'10px 0'}">
        <Col span="24">
          <Card :bordered="false">
            <div slot="title">
              <Row>
                <Col span="18">
                  项目成员筛选
                </Col>
                <Col span="6">
                  <Input v-model="search_value" placeholder="用户名、手机号、邮箱">
                    <Button slot="append" icon="ios-search" @click="search_data"></Button>
                  </Input>
                </Col>
              </Row>
            </div>
            <div>
              <Button  v-for="(item,index) in navLists" :type="changeRed == index ? 'dashed' :'text' " :key="item.name" @click="changeButton(index,item.name)">{{item.name}}</Button>
            </div>
          </Card>
        </Col>

      </Row>

      <Table height="613" :columns="columns" :data="table_data" @on-selection-change="selected_item"></Table>
      <div style="float: right ; margin: 10px">
        <Page :total="page.page_total"
              :page-size="page.page_size"
              :current="page.page_current"
              :page-size-opts="[14,20,30,40,50]"
              size="small" show-elevator show-sizer
              @on-change="change_page"
              @on-page-size-change="change_page_size"></Page>
      </div>
    </Content>


    <Drawer
      title="编辑 / 查看 可用文件分类"
      v-model="modal_edit"
      width="800">

      <Tree :data="MuenData" show-checkbox multiple @on-check-change="checkAll" ref="tree"  :render="renderContent" style="margin-bottom: 65px"></Tree>

      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="modal_edit = false">取消</Button>
        <Button  v-if="CD_.btn_List.edit_btn"  type="success"  @click="seve_menu" :disabled="spinShow">修改权限设置</Button>
      </div>
    </Drawer>


  </Layout>
</template>

<script>
  export default {
    name: 'RoleList',
    data() {
      return {
        tyle_name:'text' ,
        navLists:[{name:'全部'}],
        navActive:'全部',
        changeRed: 0,//第几个按钮
        search_value: '',//搜索框内容
        search_select: 'loginname',//搜索的类型
        modal_edit: false,//添加弹窗
        updata_modal: false,//重置密码确认窗口
        modal_loading: false,//删除loading
        selectd_ids: [],//选中的id
        isLoading: false,//提交数据时按钮的loading效果
        add_class_list: [],
        down_class_list: [],
        audit_class_list: [],
        view_class_list: [],
        page: {
          page_current: 1,//分页显示第几页
          page_total: 40,//分页总条数
          page_size: 14,//每页多少条
        },
        MuenData: [
          {
            id:0 ,
            title: '基础数据',
            checkboxList:[],
            children: [
              {
                id:0 ,
                title: '用户管理',
                checkboxList:[],
                children: [
                  {
                    id:0 ,
                    title: '用户列表',
                    checkboxList:[],
                  }
                ]
              }
            ]
          }
        ],
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '用户名',
            key: 'username'
          },
          {
            title: '手机号',
            key: 'mobile'
          },
          {
            title: '电子邮箱',
            key: 'email'
          },
          {
            title: '项目',
            key: 'role',
            filters: [
              {
                label: '管理员',
                value: 1
              },
              {
                label: '普通用户',
                value: 2
              }, {
                label: 'vip用户',
                value: 3
              },
            ],
            filterMethod(value, row) {
              return row.role.indexOf(value) > -1;
            }
          },
          {
            title: '项目',
            key: 'department',
            filters: [
              {
                label: '管理员',
                value: 1
              },
              {
                label: '普通用户',
                value: 2
              }, {
                label: 'vip用户',
                value: 3
              },
            ],
            filterMethod(value, row) {
              return row.department.indexOf(value) > -1;
            }
          },
          {
            title: '账户启用状态',
            key: 'state',
            render: (h, params) => {
              const row = params.row;
              const color = row.state === 'Disable' ? 'error' : 'success';
              const text = row.state === 'Disable' ? '禁用' : '启用';

              return h('Tag', {
                props: {
                  type: 'dot',
                  color: color
                }
              }, text);
            }
          },
          {
            title: '操作',
            key: 'action',
            fixed: 'right',
            width: 110,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                    display:this.CD_.btn_List.view_btn?"inline-block":"none",
                  },
                  on: {
                    click: () => {
                      this.updata_user(params.row)
                    }
                  }
                }, '编辑 / 查看')
              ]);
            }
          }
        ],
        table_data: [],
        check_ids:'', //选中的菜单
        model_dp: '0', //修改的id
        check_muen:[] ,
        check_list:[] ,
        class_cak:'', //选中的菜单
        spinShow: true,
        ck_id_list: [], //半选 和选中的 id
        data_list: [], //已选费雷
      }
    },
    methods: {
      renderContent (h, { root, node, data }) {
        return h('span', {
          style: {
            display: 'inline-block',
            width: '100%'
          }
        }, [
          h('span', [
            h('span', data.title)
          ]),
          h('span', {
            style: {
              display: 'inline-block',
              float: 'right',
              marginRight: '32px'
            }
          }, [
            h("checkbox-group",
              {
                props: {
                  value: data.checkboxList
                },
                style: {
                  display:  this.ck_id_list.indexOf(data.id) > -1?"inline-block":"none",
                },
                on:{
                  'on-change':(val)=>{ //选择的时候判断数据
                    data.checkboxList = val ;
                  }
                }
              },[
                h('Checkbox', {
                  props: {
                    label: "上传权限"
                  },
                  style: {
                    display: "inline-block"
                  }
                }),
                h('Checkbox', {
                  props: {
                    label: "下载权限"
                  },
                  style: {
                    display: "inline-block"
                  }
                }),
                h('Checkbox', {
                  props: {
                    label: "审核权限"
                  },
                  style: {
                    display: "inline-block"
                  }
                }),
                h('Checkbox', {
                  props: {
                    label: "查看权限"
                  },
                  style: {
                    display: "inline-block"
                  }
                }),
              ])
          ])
        ]);
      },
      changeButton(index,role_name){
        this.changeRed = index;
        this.navActive = role_name ;
        this.getUser_data();
      },
      handleReset (name) {
        //重置表单
        this.$refs[name].resetFields();
      },
      checkAll(data_list) {
        this.spinShow = false ;
        //已选分类
        this.check_muen = this.$refs.tree.getCheckedAndIndeterminateNodes() ;
        this.check_list = this.$refs.tree.getCheckedNodes() ;

        this.class_cak = this.check_list.map(function (item) {
          return item.id
        }).join();//已选分类ID

        this.check_ids = this.check_muen.map(function (item) {
          return item.id
        }).join();//已选分类ID

        this.ck_id_list = this.check_muen.map(function (item) {
          return item.id
        })

       this.data_list = data_list ;
      },
      selected_item(data) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/11 16:41
        *=======================================================
        *@function  选中内容时触发
        *
        * data 为已选内容
        *=====================================================*/
        this.selectd_ids = data.map(function (item) {
          if (item != null && item != undefined) {
            return item.id
          }
        }).join();//需要删除的id

      },
      change_page(page) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/11 17:18
        *=======================================================
        *@function  选择页数时触发
        * page  当前选择的页数
        *=====================================================*/
        this.page.page_current = page
        this.getUser_data();
      },
      change_page_size(page_size) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/11 17:18
        *=======================================================
        *@function  选择每页多少条时触发
        * page_size  当前每页多少条
        *=====================================================*/
        this.page.page_size = page_size
        this.getUser_data();
      },
      search_data() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/11 18:30
        *=======================================================
        *@function  搜索内容
        *=====================================================*/
        this.getUser_data();

      },
      updata_user(data) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/12 11:55
        *=======================================================
        *@function  查看编辑 文件分类
        *=====================================================*/
        this.model_dp = data.id ;
        //获取自己的分类菜单
        this.$http({
          method: 'post',
          url: this.CD_.qj_url+'index/Treeclass/user_class_lsit',
          data:{
            class_cak : data.class_cak,
            add_class_list : data.add_class_list,
            down_class_list : data.down_class_list,
            audit_class_list : data.audit_class_list,
            view_class_list : data.view_class_list,
          }
        }).then(function(res){
          var json = res.data ;
          if(json.status){

            this.MuenData = json.data_list ;

            //拉取菜单成功获取对应按钮选项
            var _this = this ;
            setTimeout(function () {
              _this.checkAll();
            },1000) ;

          }else{
            this.$Notice.error({title: res.msg});
          }
        }.bind(this)).catch(function(err){
          this.$Notice.error({title: '操作失败',desc:'错误：'+ err});
        }.bind(this))

        this.modal_edit = true;
      },
      seve_menu(){
        /*======================================================
        *@author wf_Huang
        *@Time 2018/10/11 11:39
        *=======================================================
        *@function  保存项目权限设置
        *=====================================================*/

        //提交前给 给菜单参数赋值
        var data_list = this.$refs.tree.getCheckedAndIndeterminateNodes() ;
        var _htis = this ;
        if(data_list != undefined){
          data_list.map(function (data) {
            if(data.checkboxList.indexOf('上传权限') > -1 && _htis.ck_id_list.indexOf(data.id) > -1){
              let index = _htis.add_class_list.indexOf(data.id) ;
              if(index == -1){
                _htis.add_class_list.push(data.id) ;
              }
            }else {
              let index = _htis.add_class_list.indexOf(data.id) ;
              if(index > -1){
                _htis.add_class_list.splice(index, 1);
              }

            }
            if(data.checkboxList.indexOf('下载权限') > -1 && _htis.ck_id_list.indexOf(data.id) > -1){
              let index = _htis.down_class_list.indexOf(data.id) ;
              if(index == -1) {
                _htis.down_class_list.push(data.id);
              }
            }else {
              let index = _htis.down_class_list.indexOf(data.id) ;
              if(index > -1){
                _htis.down_class_list.splice(index, 1);
              }

            }
            if(data.checkboxList.indexOf('审核权限') > -1 && _htis.ck_id_list.indexOf(data.id) > -1){
              let index = _htis.audit_class_list.indexOf(data.id) ;
              if(index == -1) {
                _htis.audit_class_list.push(data.id);
              }
            }else {
              let index = _htis.audit_class_list.indexOf(data.id) ;
              if(index > -1){
                _htis.audit_class_list.splice(index, 1);
              }

            }
            if(data.checkboxList.indexOf('查看权限') > -1 && _htis.ck_id_list.indexOf(data.id) > -1){
              let index = _htis.view_class_list.indexOf(data.id) ;
              if(index == -1) {
                _htis.view_class_list.push(data.id);
              }
            }else {
              let index = _htis.view_class_list.indexOf(data.id) ;
              if(index > -1){
                _htis.view_class_list.splice(index, 1);
              }

            }
          })
        }



        //保存项目权限设置
        this.$http({
          method: 'post',
          url: this.CD_.qj_url+'index/User/setClassTree',
          data:{
            check_ids : this.check_ids,
            class_cak : this.class_cak,
            add_class_list: this.add_class_list.join(),
            down_class_list: this.down_class_list.join(),
            audit_class_list: this.audit_class_list.join(),
            view_class_list: this.view_class_list.join(),
            model_dp : this.model_dp,
          }
        }).then(function(res){
          var json = res.data ;
          if(json.status){
            this.$Notice.success({title: '权限设置成功'});

            this.getUser_data();
          }else{
            this.$Notice.error({title: '保存权限设置失败，请重试'});
          }
        }.bind(this)).catch(function(err){
          this.$Notice.error({title: '操作失败',desc:'错误：'+ err});
        }.bind(this))
      },
      getUser_data() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/12 11:36
        *=======================================================
        *@function  获取初始化信息、搜索、分页
        *=====================================================*/
        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/User/getDeparmentUser',
          data: {
            search_value: this.search_value,
            page_current: this.page.page_current,
            navActive:  this.navActive,
            page_size: this.page.page_size
          }
        }).then(function (res) {
          var json = res.data;
          if (json.status) {
            this.table_data = json.user_data;
            this.columns[5].filters = json.role_data;
            this.columns[6].filters = json.department_data;
            this.page = json.page;

            this.navLists = json.navLists ;
            this.navLists.unshift({
              date: "2018-10-10 14:46:03",
              description: "全部",
              id: 0,
              label: "全部",
              name: "全部",
              state: "Enable",
              user_number: "0",
              value: "全部",
            }) ;
            this.$Loading.finish();
          } else {
            this.$Notice.error({title: '用户不存在~~~'});
            this.$Loading.error();
          }


        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '初始化数据失败，错误：',desc:'错误：'+ err});
        }.bind(this))
      },

    },
    mounted() {
      this.getUser_data();
    }
  }
</script>

<style scoped>
  .user_text{
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85098);
    line-height: 18px;
    display: block;
    margin-bottom: 16px;
  }
  .demo-drawer-footer{
    width: 800px;
    position: fixed;
    bottom: 0;
    right: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
  .ivu-col{
    font-size: 14px;
    line-height: 35px;
  }
</style>
